﻿<template>
  <div class="sales-report-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">馃搱 销售报表分析</span>
          <div class="header-actions">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              size="small"
            />
            <el-button type="primary" @click="handleRefresh">刷新</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20" class="kpi-row">
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #667eea;">
            <div class="kpi-label">销售总额</div>
            <div class="kpi-value">楼{{ totalSales.toLocaleString() }}</div>
            <div class="kpi-trend up">环比 +{{ salesGrowth }}%</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #f5576c;">
            <div class="kpi-label">订单数量</div>
            <div class="kpi-value">{{ totalOrders.toLocaleString() }}</div>
            <div class="kpi-trend up">环比 +{{ ordersGrowth }}%</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #4facfe;">
            <div class="kpi-label">客单价</div>
            <div class="kpi-value">楼{{ avgOrderValue }}</div>
            <div class="kpi-trend up">环比 +{{ avgGrowth }}%</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="kpi-card" style="border-left: 4px solid #43e97b;">
            <div class="kpi-label">毛利率</div>
            <div class="kpi-value">{{ grossMargin }}%</div>
            <div class="kpi-trend">目标 45%</div>
          </div>
        </el-col>
      </el-row>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃搳 销售趋势分析</span>
        </template>
        <div class="chart-container" ref="salesTrendChart"></div>
      </el-card>

      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃弳 商品销售排行 TOP 10</span>
            </template>
            <div class="chart-container" ref="productRankChart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>馃搷 区域销售分布</span>
            </template>
            <div class="chart-container" ref="regionDistChart"></div>
          </el-card>
        </el-col>
      </el-row>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃搵 销售明细数据</span>
        </template>
        <el-table :data="salesData" border stripe>
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="salesAmount" label="销售额" width="150">
            <template #default="{ row }">
              楼{{ row.salesAmount.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="orders" label="订单数" width="100" />
          <el-table-column prop="avgOrderValue" label="客单价" width="120">
            <template #default="{ row }">
              楼{{ row.avgOrderValue }}
            </template>
          </el-table-column>
          <el-table-column prop="grossProfit" label="毛利" width="150">
            <template #default="{ row }">
              楼{{ row.grossProfit.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="grossMargin" label="毛利率" width="100">
            <template #default="{ row }">
              {{ row.grossMargin }}%
            </template>
          </el-table-column>
          <el-table-column prop="refundAmount" label="退款金额" width="150">
            <template #default="{ row }">
              楼{{ row.refundAmount.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="refundRate" label="退款率" width="100">
            <template #default="{ row }">
              {{ row.refundRate }}%
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const dateRange = ref([])
const totalSales = ref(15678900)
const salesGrowth = ref(18.3)
const totalOrders = ref(54321)
const ordersGrowth = ref(12.5)
const avgOrderValue = ref(288)
const avgGrowth = ref(5.2)
const grossMargin = ref(42.5)

const salesData = ref([
  { date: '2024-01-20', salesAmount: 567890, orders: 1234, avgOrderValue: 460, grossProfit: 241512, grossMargin: 42.5, refundAmount: 12560, refundRate: 2.2 },
  { date: '2024-01-19', salesAmount: 534210, orders: 1189, avgOrderValue: 449, grossProfit: 227169, grossMargin: 42.5, refundAmount: 10890, refundRate: 2.0 }
])

const salesTrendChart = ref(null)
const productRankChart = ref(null)
const regionDistChart = ref(null)

onMounted(() => {
  initSalesTrendChart()
  initProductRankChart()
  initRegionDistChart()
})

const initSalesTrendChart = () => {
  const chart = echarts.init(salesTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['销售额', '订单数', '客单价'] },
    xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'] },
    yAxis: [
      { type: 'value', name: '金额(万元)/订单数' },
      { type: 'value', name: '客单价(元)' }
    ],
    series: [
      { name: '销售额', type: 'bar', data: [156, 178, 189, 165, 198, 212, 234], itemStyle: { color: '#667eea' } },
      { name: '订单数', type: 'line', data: [5432, 6123, 6456, 5890, 6789, 7234, 7890], itemStyle: { color: '#f5576c' } },
      { name: '客单价', type: 'line', yAxisIndex: 1, data: [287, 291, 293, 280, 292, 293, 296], itemStyle: { color: '#43e97b' } }
    ]
  })
}

const initProductRankChart = () => {
  const chart = echarts.init(productRankChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: { type: 'value' },
    yAxis: {
      type: 'category',
      data: ['商品10', '商品9', '商品8', '商品7', '商品6', '商品5', '商品4', '商品3', '商品2', '商品1']
    },
    series: [{
      type: 'bar',
      data: [45670, 52340, 58900, 63450, 69870, 75630, 82450, 89120, 95670, 108900],
      itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#4facfe' },
        { offset: 1, color: '#00f2fe' }
      ])}
    }]
  })
}

const initRegionDistChart = () => {
  const chart = echarts.init(regionDistChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [{
      name: '区域销售',
      type: 'pie',
      radius: '60%',
      data: [
        { value: 3567890, name: '华东' },
        { value: 2890123, name: '华南' },
        { value: 2345678, name: '华北' },
        { value: 1890456, name: '西南' },
        { value: 1234567, name: '其他' }
      ]
    }]
  })
}

const handleRefresh = () => {
  ElMessage.success('数据已刷新')
}

const handleExport = () => {
  ElMessage.success('报表导出成功')
}
</script>

<style scoped>
.sales-report-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  padding: 24px;
  background: white;
  border-radius: 8px;
}

.kpi-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 12px;
}

.kpi-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.kpi-trend {
  font-size: 14px;
  color: #606266;
}

.kpi-trend.up {
  color: #67c23a;
}

.chart-container {
  height: 400px;
}
</style>
